<template>
    <div class="pfull cockpit elm-edit">
        <!--第一行-->
        <div style="height: 40%">
            <div style="width: calc(50% - 6px); margin-right: 6px; margin-bottom: 12px; height: 100%; float: left;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>报销项</span>
                        <elm-open-button class="info-btn" url="/business/analysis/cockpit_cost_list" title="报销项" width="70%" height="80%" type="text">详情 >></elm-open-button>
                    </div>
                    <div class="pie-chart" ref="costChart"></div>
                </el-card>
            </div>
            <div style="width:calc(50% - 6px); margin-left: 6px; height: 100%; float: right;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>收入统计</span>
                        <elm-open-button class="info-btn" url="/business/analysis/cockpit_income_list" title="收入统计" width="70%" height="80%" type="text">详情 >></elm-open-button>
                    </div>
                    <div class="pie-chart" ref="incomeChart"></div>
                </el-card>
            </div>
        </div>

        <!--第二行-->
        <div style="height: 40%">
            <div style="margin-bottom: 12px; width: 100%; height: 100%; float: right;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>项目运行</span>
                        <elm-open-button class="info-btn" url="/business/analysis/cockpit_pj_list" title="项目运行" width="80%" height="80%" type="text">详情 >></elm-open-button>
                    </div>
                    <div class="box-card-table">
                        <elm-table style="max-width: 100%" url="/business/analysis/cockpit/GetPjPlanData" :show-index="true" :post-data="pjPlanParams" height="100%">
                            <el-table-column prop="name" label="项目名称" align="left" header-align="center"></el-table-column>
                            <el-table-column prop="progress" label="项目进度" align="center">
                                <template v-slot="scope">
                                    <div style="display: inline-block;width: 180px;margin-right:10px;">
                                        <el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.progress"
                                                     :color="scope.row.progress<50?'#f56c6c':'#6f7ad3'" text-color="#fff"></el-progress>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="b_sdate" label="开工日期" align="center" width="100px"></el-table-column>
                            <el-table-column prop="b_edate" label="完工日期" align="center" width="100px"></el-table-column>
                            <el-table-column prop="delay_days" label="滞后天数" width="80px" align="center"></el-table-column>
                            <el-table-column prop="ei_name" label="负责人" width="80px" align="center"></el-table-column>
                            <el-table-column fixed="right" label="操作" width="80px" align="center" style="position:absolute">
                                <template v-slot="scope">
                                    <elm-open-button url="/business/analysis/cockpit_pj_info" title="查看" width="70%" height="80%" :data="{ pj_id: scope.row.id }" type="text">查看</elm-open-button>
                                </template>
                            </el-table-column>
                        </elm-table>
                    </div>
                </el-card>
            </div>
        </div>

        <!--第三行-->
        <div style="height: 40%">
            <div style="width: calc(50% - 6px); margin-right: 6px; height: 100%; float: left;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>经营月表</span>
                    </div>
                    <div class="box-card-table">
                        <elm-table style="max-width: 100%" url="/business/analysis/cockpit/GetMonthTabData" :show-index="false" :post-data="monthTabParams" height="100%">
                            <el-table-column prop="this_month" label="年月" align="center"></el-table-column>
                            <el-table-column prop="total_income" label="总收入" align="center"></el-table-column>
                            <el-table-column prop="net_profit" label="净利润" align="center"></el-table-column>
                            <el-table-column prop="bus_cost" label="营业成本" align="center"></el-table-column>
                            <el-table-column prop="sell_cost" label="销售费用" align="center"></el-table-column>
                            <el-table-column prop="manage_cost" label="管理费用" align="center"></el-table-column>
                            <el-table-column prop="finance_cost" label="财务费用" align="center"></el-table-column>
                        </elm-table>
                    </div>
                </el-card>
            </div>
            <div style="width: calc(50% - 6px); margin-left: 6px; height: 100%; float: right;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>经营趋势</span>
                    </div>
                    <div class="pie-chart" ref="trendChart"></div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pjPlanParams: {
                now_year: new Date().getFullYear()
            },
            monthTabParams: {
                now_year: new Date().getFullYear()
            },
            costOption: {
                title: {
                    text: '0元',
                    subtext: '报销项合计',
                    left: 'center',
                    top: 'center',
                    textStyle: {
                        fontSize: 20,
                        fontWeight: 'bold'
                    },
                    subtextStyle: {
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: '10%',
                    top: 'middle'
                },
                series: [{
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    padAngle: 5,
                    itemStyle: {
                        borderRadius: 5
                    },
                    label: {
                        show: false
                    },
                    data: [
                        { value: 0, name: '住宿费', itemStyle: { color: '#5B8FF9' } },
                        { value: 0, name: '火车票', itemStyle: { color: '#5AD8A6' } },
                        { value: 0, name: '飞机票', itemStyle: { color: '#F6BD16' } },
                        { value: 0, name: '业务招待费', itemStyle: { color: '#E8684A' } }
                    ]
                }]
            },
            incomeOption: {
                title: {
                    text: '0万元',
                    subtext: '收入合计',
                    left: 'center',
                    top: 'center',
                    textStyle: {
                        fontSize: 20,
                        fontWeight: 'bold'
                    },
                    subtextStyle: {
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: '10%',
                    top: 'middle'
                },
                series: [{
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    padAngle: 5,
                    itemStyle: {
                        borderRadius: 5
                    },
                    label: {
                        show: false
                    },
                    data: [
                        { value: 0, name: '项目收入', itemStyle: { color: '#5B8FF9' } },
                        { value: 0, name: '订单收入', itemStyle: { color: '#5AD8A6' } },
                        { value: 0, name: '其他收入', itemStyle: { color: '#F6BD16' } }
                    ]
                }]
            },
            trendOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data: ['净利润', '同比增长'],
                    top: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 0
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '净利润',
                        min: 0,
                        axisLabel: {
                            formatter: '{value} 万'
                        }
                    },
                    {
                        type: 'value',
                        name: '增长率',
                        // min: -100,
                        // max: 100,
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: '净利润',
                        type: 'bar',
                        barWidth: '20',
                        data: [],
                        itemStyle: {
                            color: '#5B8FF9'
                        }
                    },
                    {
                        name: '同比增长',
                        type: 'line',
                        yAxisIndex: 1,
                        smooth: true,
                        data: [],
                        itemStyle: {
                            color: '#5AD8A6'
                        }
                    }
                ]
            },
            // 添加预定义的颜色数组
            chartColors: [
                '#5B8FF9', // 蓝色
                '#5AD8A6', // 绿色
                '#F6BD16', // 黄色
                '#E8684A', // 红色
                '#6DC8EC', // 浅蓝
                '#9270CA', // 紫色
                '#FF9D4D', // 橙色
                '#269A99', // 青色
                '#FF99C3', // 粉色
                '#A9ABB1'  // 灰色
            ],
        }
    },
    created() {
    },
    mounted() {
        this.initCostChart();
        this.initIncomeChart();
        this.initTrendChart();
        this.$nextTick(() => {
            this.getCostData(); //查询成本支出
            this.getIncomeData(); //查询收入
            this.GetBizTrendData(); //查询经营趋势
        })
    },
    methods: {
        async getCostData() {
            let res_cost = await elm.post("/business/analysis/cockpit/GetCostData", {now_year: new Date().getFullYear()});
            // 处理数据并动态赋值颜色
            let cost_data = res_cost.map((item, index) => ({
                name: item.item_type,
                value: item.total_cost,
                itemStyle: {
                    // 如果数据项数量超过预定义颜色数量，则循环使用颜色
                    color: this.chartColors[index % this.chartColors.length]
                }
            }));
            // 计算总成本
            const totalCost = cost_data.reduce((sum, item) => sum + item.value, 0);
            // 更新图表配置
            this.costOption.title.text = totalCost + '元';
            this.costOption.series[0].data = cost_data;
            // 初始化图表
            this.initCostChart();
        },
        async getIncomeData() {
            let res_income = await elm.post("/business/analysis/cockpit/GetIncomeData", {now_year: new Date().getFullYear()});
            // 处理数据并动态赋值颜色
            let income_data = res_income.map((item, index) => ({
                name: item.key,
                value: item.value,
                itemStyle: {
                    // 如果数据项数量超过预定义颜色数量，则循环使用颜色
                    color: this.chartColors[index % this.chartColors.length]
                }
            }));
            // 计算总成本
            const totalIncome = income_data.reduce((sum, item) => sum + item.value, 0);
            // 更新图表配置
            this.incomeOption.title.text = totalIncome + '万元';
            this.incomeOption.series[0].data = income_data;
            // 初始化图表
            this.initIncomeChart();
        },
        async GetBizTrendData() {
            let res_month = await elm.post("/business/analysis/cockpit/GetBizTrendData", {now_year: new Date().getFullYear()});
            const netProfitData = [];
            const growthRateData = [];
            if (res_month.list) {
                res_month.list.forEach(item => {
                  netProfitData.push(item.net_profit_now_year); // 净利润
                  growthRateData.push(item.growth_rate); // 同比增长率
                });
            }
            // 更新图表配置
            this.trendOption.series[0].data = netProfitData; // 更新净利润数据
            this.trendOption.series[1].data = growthRateData;
            // 初始化图表
            this.initTrendChart();
        },
        initCostChart() {
            const chart = this.$echarts.init(this.$refs.costChart);
            chart.setOption(this.costOption);
            // 监听窗口大小变化，重绘图表
            window.addEventListener('resize', () => {
                chart.resize();
            })
        },
        initIncomeChart() {
            const chart = this.$echarts.init(this.$refs.incomeChart);
            chart.setOption(this.incomeOption);
            // 监听窗口大小变化，重绘图表
            window.addEventListener('resize', () => {
                chart.resize();
            })
        },
        initTrendChart() {
            const chart = this.$echarts.init(this.$refs.trendChart);
            chart.setOption(this.trendOption);
            // 监听窗口大小变化，重绘图表
            window.addEventListener('resize', () => {
                chart.resize();
            })
        }
    }
}
</script>

<style scoped>
.cockpit {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: auto;
}

.elm-edit .el-card {
    margin: 0;
}

.cockpit .box-card-table .el-table--border,
.cockpit .box-card-table .el-table--group ,
.cockpit .box-card-table .el-table td.el-table__cell{
    border: 0px solid #EBEEF5;
}
.cockpit .box-card-table .el-table::before {
    display: none;
}
.cockpit .box-card-table .el-table::after {
    display: none;
}
.cockpit .box-card-table .el-table .cell
{
    cursor: pointer;
}

::v-deep .el-card.box-card {
  height: 100%;
}
::v-deep .el-card.box-card .el-card__body {
  padding: 5px;
  height: calc(100% - 50px);
}

.info-btn {
    float: right;
    padding: 3px 0;
}

.box-card-table {
    height: 100%;
    display: flex;
    overflow: auto;
}

.pie-chart {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

</style>